import React, { useState } from 'react';
import Modals from '@/components/modals/Modals';
import { ModalProps, Radio, RadioChangeEvent } from 'antd';
import { SelectionItem } from '@/pages/components/selection-modal';

interface Props extends ModalProps {
  open: boolean;
  onCancel: () => void;
  onOk: () => void;
  onEdit: () => void;
  selectedKbs: SelectionItem[] | [];
}

const EditUserModal = ({ onEdit, selectedKbs, ...props }: Props) => {
  const [optionValue, setOptionValue] = useState('');
  const options = [
    { label: '所有知识库可问答', value: 'all' },
    {
      label: (
        <>
          <div className="flex">
            <span>部分知识库可问答</span>
            {optionValue === 'part' && (
              <a className="!text-[#6640FF]" onClick={onEdit}>
                编辑
              </a>
            )}
          </div>
        </>
      ),
      value: 'part',
    },
  ];

  const handeOptions = (e: RadioChangeEvent) => {
    setOptionValue(e.target.value);
  };

  return (
    <Modals {...props} title="编辑用户信息" closable={false}>
      <div className="py-2 text-xs text-[#474C5F]">名称</div>
      <div className="py-3 pl-[16px] text-base text-[#444]">xxxxx</div>
      <div className="py-2 text-xs text-[#474C5F]">类型</div>
      <div className="py-3 pl-[16px] text-base text-[#444]">xxxxx</div>
      <div className="py-2 text-xs text-[#474C5F]">问答权限</div>
      <div className="flex items-center pb-[16px] pl-[16px]">
        <Radio.Group onChange={handeOptions}>
          <div className="flex gap-6">
            {options.map((item) => {
              return (
                <div key={item.value} className="flex-1">
                  <Radio value={item.value}>{item.label}</Radio>
                  {selectedKbs.length > 0 && item.value === 'part' && (
                    <div className="flex items-center">
                      <div className="text-xs text-[#474C5F]">
                        {selectedKbs.map((item) => (
                          <span key={item.id}>{item.name}</span>
                        ))}
                      </div>
                      {selectedKbs.length > 2 && (
                        <div>等{selectedKbs.length - 2}个知识库可问答</div>
                      )}
                    </div>
                  )}
                </div>
              );
            })}
          </div>
        </Radio.Group>
      </div>
    </Modals>
  );
};

export default EditUserModal;
